<template>
	<view class="tab-switch">
		<view class="tab" v-for="(item,index) in tabs" :key="item.key" :class="{'active': current === index}" @click="tabSwitch(index,item)">
			{{item.value}}
		</view>
	</view>
</template>

<script>
	export default {
		props: ['tabs', 'active'],
		data() {
			return {
				current: this.active
			};
		},
		methods: {
			tabSwitch(i,item) {
				this.current = i
				this.$emit('change', item)
			}
		}
	}
</script>

<style scoped>
.tab-switch {
	height: 71upx;
	background: #FFFFFF;
	display: flex;
}
.tab {
	flex: 1;
	font-size:28upx;
	font-weight:500;
	color:rgba(34,34,34,1);
	text-align: center;
	line-height: 71upx;
	position: relative;
}
.active {
	color: #EA0A2A;
}
.active:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -42upx;
	width:84upx;
	height:2upx;
	background:rgba(234,10,42,1);
}
</style>
